<template>
  <div class="hottype3">
    <div class="type3_left">
      <p>{{itemdata.content}}</p>
      <div class="type3_left_bottom">
        <div>{{itemdata.author.nickname}}</div>
        <span>{{itemdata.all_comment_count}}评论</span>
        <span>{{itemdata.create_time}}</span>
      </div>
    </div>
    <div class="type3_right">
      <van-image :src="itemdata.social_image.length > 0 ? itemdata.social_image[0].image : itemdata.cover" class="imgitem">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
      </van-image>
    </div>
  </div>
</template>

<script>
export default {
  props: ['itemdata']
}
</script>

<style lang="scss">
.hottype3{
  padding: .24rem 0;
  border-bottom: .02rem solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  .type3_left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p{
      max-height: .94rem;
      font-size: .32rem;
      color: #333333;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .type3_left_bottom{
      margin-top: .12rem;
      color: #999999;
      font-size: .24rem;
      display: flex;
      align-items: center;
      *{
        margin-right: .24rem;
      }
    }
  }
  .type3_right{
    height: 1.68rem;
    width: 2.24rem;
    margin-left: .16rem;
    .imgitem{
      height: 1.68rem;
      width: 2.24rem;
    }
  }
}
</style>
